<template>
  <view style="position: relative;">
    <view v-if="showPage" class="main-page" :style="{
          backgroundImage:'url('+staticImgs.topBg+')'
       }">
      <u-navbar leftIconColor="#fff" placeholder @leftClick="backToPage" bgColor="transparent" />

      <view class="tit" >
        <image class="img" :src="staticImgs.tit" mode="widthFix"></image>
      </view>
      
      <view class="info-wraper" >
        <view class="info-l">
          <view  class="row-1">姓名：{{nickName}}</view>
          <view class="row-2">诊断日期：{{createTime}}</view>
        </view>
        <view class="info-r"
          :style="{
              backgroundImage:'url('+staticImgs.degressBg+')'
           }"
        >
          <view class="row-1">待诊断</view>
          <view class="row-2">完成全部测试解锁</view>
        </view>
      </view>

      <view class="report-res-info-box" :style="{
            backgroundImage:'url('+staticImgs.resBoxBg+')'
         }">
        <view class="row-1">诊断日期：{{currentTime}}</view>
        <view class="row-2" :style="{
              backgroundImage:'url('+staticImgs.resInfoBoxBg+')'
           }">你可能有{{sclData.remarkInfo || ''}}</view>
        <view class="row-3">解锁手册助你全面检测抑郁情绪问题</view>
      </view>

      <view class="scl-group-list-box">

        <view class="tit-img-box">
          <image class="img" :src="staticImgs.boxTit" mode=""></image>
        </view>

        <view class="main-wrapper">
          <view class="intro-tit-box">
            {{sclListData.length}}大量表
          </view>

          <view class="scl-list">
            <view class="scl-box" v-for="(scl,index) in sclListData" :key="index">
              <view class="name">{{scl.sclName || ''}}</view>
              <view class="num"></view>
              <view class="price">¥{{scl.newOriginalPrice || ''}}</view>
            </view>
          </view>

          <view class="scl-more-info">
            <template>
              <view class="info-item">
                <view class="label">测评原价</view>
                <view class="price">￥{{priceObj.sumPrice || ''}}</view>
              </view>
              <view class="info-item">
                <view class="label">优惠减免</view>
                <view class="del-price">-￥{{priceObj.deratePrice || '0'}}</view>
              </view>
            </template>

            <view class="info-item">
              <view class="label bold-label">实际应付</view>
              <view class="price bold-price">￥{{priceObj.price || ''}}</view>
            </view>

          </view>
          <!-- scl-more-inof  end -->

          <view class="button-wrapper" @click="toOrderPay">
            <image class="img" :src="staticImgs.btnImg" mode="widthFix"></image>
          </view>

        </view>

      </view>

    </view>
    
    
    <template>
    
      <DialogMask v-if="showTipModal && tipObj && tipObj.content" @click="dialogClose">
        <template #content>
          <text>
            {{tipObj.content || ''}}
          </text>
        </template>
    
        <template #btn1 v-if="tipObj.btnNum > 0 && tipObj.leftBtn.txt">
          <view class="btn-normal btn-base" :style="[lStyle]"
            @click.stop="setCurrentTipIndex(tipObj.leftBtn,'leftBtn')">
            {{tipObj.leftBtn.txt}}
          </view>
        </template>
        <template #btn2 v-if="tipObj.btnNum > 1 && tipObj.rightBtn.txt">
          <view class="btn-normal btn-base" :style="[rStyle]"
            @click.stop="setCurrentTipIndex(tipObj.rightBtn,'rightBtn')">
            {{tipObj.rightBtn.txt}}
          </view>
        </template>
    
      </DialogMask>
    
    </template>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import DialogMask from './DialogMask.vue'
  export default {
    components:{DialogMask},
    data() {
      return {
        staticImgs: {
          topBg: this.imgBaseURL + '/scl/checkup-depressed/main-top-page-bg.png',
          boxTit: this.imgBaseURL + '/scl/checkup-depressed/pay-page-tit.png',
          btnImg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-btn-new.png',
          resBoxBg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-res-box-bg.png',
          resInfoBoxBg: this.imgBaseURL + '/scl/checkup-depressed/pay-page-res-info-bg.png',
          degressBg: this.imgBaseURL + '/scl/checkup-depressed/v2/degress-bg.png',
          tit: this.imgBaseURL + '/scl/checkup-depressed/v2/tit-new.png',
        },
        sclListData: [],
        sclId: '',
        payGroupId: '',
        sclData: {},
        showPage: false,
        priceObj: {
          deratePrice: 0,
          price: 0,
          sumPrice: 0,
        },
        tipsList:[],
        currentTipIndex:0,
        currentTipKey:'',
        tipObj:{},
        showTipModal:false,
        currentTime:'',
        createTime:'',
        
      }
    },
    computed:{
      ...mapGetters('user',['nickName']),
      lStyle() {
        if (this.tipObj.btnNum > 1 && !this.tipObj.leftBtn.style) {
          return {
            backgroundColor: '#5EB7FF'
          }
        } else {
          return this.tipObj?.leftBtn?.style
        }
      },
      rStyle() {
        return this.tipObj?.rightBtn?.style
      },
    },
    async onLoad(opts) {
      this.sclId = opts.sclId
      this.opts = opts

      this.$u.api.getDepressionList().then(({
        data: res
      }) => {
        const {
          sclExaminationBOS,
          sclId
        } = res.data
        this.payGroupId = sclId

        console.log(sclExaminationBOS, '===sclExaminationBOS==')
        console.log(this.sclId, '=====this.sclId====')
        const tmpSclData = sclExaminationBOS.find(item => item.sclId == this.sclId)
        this.sclData = tmpSclData
        // console.log(tmpSclData,'===tmpSclData')
        this.sclListData = sclExaminationBOS

        this.priceObj.deratePrice = res.data.deratePrice
        this.priceObj.price = res.data.price
        this.priceObj.sumPrice = res.data.sumPrice

        this.createTime = res.data.createTime
        this.currentTime = this.$dayjs().format('YYYY.MM.DD')
        this.showPage = true
      })
      
      this.initDialog()

      return false

      // const {
      //   data: res
      // } = await this.$u.api.getCheckUpList()
      // this.sclListData = JSON.parse(JSON.stringify(res.data.sclExaminationBOS))
      this.sclListData = [{
          "sclId": "db87db28bb7042da91a3ab6d82e7bcbe",
          "sclUid": "db87db28bb7042da91a3ab6d82e7bcbe",
          "sclTotalId": "202405301121",
          "sclName": "心理全维度症状自评(2024年版)",
          "newOriginalPrice": 0.01,
          "type": 0,
          "remark": "全维度",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796027565462056962",
          "healthType": "???",
          "isSclReport": "Y",
          "sclExaminationReprotId": "1843535755637395457",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1737284540104425474",
          "sclUid": "bdb173d5ecfc47379956adf1f46f4ad0",
          "sclTotalId": "202405301121",
          "sclName": "抑郁自评量表（SDS）",
          "newOriginalPrice": 0.02,
          "type": 1,
          "remark": "抑郁",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796028151205031938",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589762",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1737284592004743169",
          "sclUid": "9430d8d50dca440ba6a1e14d868b392e",
          "sclTotalId": "202405301121",
          "sclName": "焦虑自评量表（SAS）",
          "newOriginalPrice": 0.01,
          "type": 2,
          "remark": "焦虑",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796028302703263746",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589763",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1744235691976761345",
          "sclUid": "a3db095f31ec46b48874028b9180ef91",
          "sclTotalId": "202405301121",
          "sclName": "人际关系诊断量表",
          "newOriginalPrice": 10.2,
          "type": 3,
          "remark": "人际关系",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796045058071126018",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589764",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1838046119032958978",
          "sclUid": "8e9b66be8d8241babbd161e69202056e",
          "sclTotalId": "202405301121",
          "sclName": "心理压力感受测试（TT专用）",
          "newOriginalPrice": 4.5,
          "type": 4,
          "remark": "压力",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796045659253288962",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755641589765",
          "moduleHealthStatus": null
        },
        {
          "sclId": "1764906872111104002",
          "sclUid": "2f42c186229d4b3f8afc3c02812708e7",
          "sclTotalId": "202405301121",
          "sclName": "敏感指数测试",
          "newOriginalPrice": 11.8,
          "type": 5,
          "remark": "敏感",
          "virtualGoodsUid": "202405301121",
          "examinationId": "1796045915508535297",
          "healthType": "???",
          "isSclReport": "N",
          "sclExaminationReprotId": "1843535755696115713",
          "moduleHealthStatus": null
        }
      ]
    },
    methods: {
      dialogClose() {
        console.log('dialogClose------')
        this.showTipModal = false
      },
      initDialog(){
        this.$u.api.getWriterDetail({entrancePay:'Y'}).then(({data:res})=>{
          if(res.code == 200){
            this.tipsList = res.data.jsonArray
            
            if (res.data.showKey) {
              this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === res.data.showKey)
              this.currentTipKey = res.data.showKey
              this.tipObj = this.tipsList[this.currentTipIndex]
              this.showTipModal = true
            }
          }
          console.log('getWriterDetail：',res.data)
        })
      },
      toOrderPay() {
        if(this.pageLoading) return
        const submitForm = this.$removeEmptyProperty({
          orderType: '12',
          sclId: this.payGroupId
        })
        const that = this
        this.pageLoading = true
        this.$u.api.addLog({
          sclId: this.payGroupId,
          sourseType: 1
        })
        this.$u.api.orderPay(submitForm).then(res => {
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                console.log(res, '================= uni.requestPayment - res')
                that.toSubmit()
                that.useSubscription()
                that.pageLoading = false                
              },
              fail() {
                that.pageLoading = false
              }
            })
          } else {
            that.$showToast(res.data.message);
            that.pageLoading = false
          }
        }).catch(e=>{
          that.pageLoading = false
        })
      },
      // 如果还有需要对话框的地方，抽出一个mixin!
      async setCurrentTipIndex(targetObj,side) {
        const key = targetObj.next
        console.log(this.tipsList[this.currentTipIndex],'---targetObj')
        
        await this.$u.api.updateDepressionDialogIndex({
          showKey:this.tipsList[this.currentTipIndex].key
        })
        
        if (targetObj.type == 'close') {
          return this.showTipModal = false
        }else if (targetObj.type == 'skip') {
          console.log(this.fromSclId,targetObj,'-------targetObj')
          
          if(this.canSeeCheckupDepressedIntro){
            this.updateUserJson('canSeeCheckupDepressedIntro')
          }
          
          return uni.navigateTo({
            url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
              sclId: targetObj.next,
              sclReportType: 2,
              hasOwn:this.isPayOk
            }),
            success: () => {
              this.showTipModal = false
            }
          })
          
        }
      
      
        this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === key)
        this.currentTipKey = key
        
        this.tipObj = this.tipsList[this.currentTipIndex]
      },
      backToPage() {
        uni.redirectTo({
          url: '/subcontractorC/pages/checkupDepressed/index'
        })
      },
      toSubmit() {
        uni.showLoading({
          title: "提交中..."
        })

        const submitForm = this.$removeEmptyProperty({
          type: 'order',
          sclId: this.sclId,
          testDuration: this.opts.testDuration,
          h5Type: this.opts.userType,
          answerJson: uni.getStorageSync(`sclAnswer-${this.sclId}`),
          sclReportType: 1
        })

        this.$u.api.userWebAnswer(submitForm).then(res => {
          uni.removeStorageSync(`sclAnswer-${this.sclId}`)
          if (res.data.code == 2000) {
            uni.reLaunch({
              url: '/subcontractorC/pages/checkupDepressed/index?reportId=' + res.data.data.id
            })
          } else {
            setTimeout(() => {
              this.$showToast(res.data.message);
            }, 300)
          }
        }).finally(() => {
          uni.hideLoading()
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .main-page {
    width: 100vw;
    height: 100%;
    background-size: 100% 776rpx;
    background-color: rgba(162, 242, 226, 1);
    background-repeat: no-repeat;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    
    >.tit {
      width: 620rpx;
      height: 104rpx;
      margin: auto;
      margin-bottom: 20rpx;
    
      .img {
        width: 100%;
        height: 100%;
      }
    }
    
    .info-wraper {
      display: flex;
      // align-items: center;
      justify-content: space-between;
      width: 710rpx;
      margin: auto;
      background: linear-gradient( 270deg, rgba(87, 203, 205, 0.4) 0%, rgba(141, 226, 229, 0.4) 51%, rgba(20, 156, 158, 0.4) 100%);
      border-radius: 16rpx;
      
      .info-l{
        margin-left: 30rpx;
        
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: rgba(255,255,255,.9);
        line-height: 42rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        
        
        .row-1{
          margin-top: 34rpx;
          margin-bottom: 12rpx;
        }
      }
      
      .info-r{
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 210rpx;
        height: 140rpx;
        box-sizing: border-box;
        margin: 12rpx; 
        margin-right: 30rpx;
        padding-top: 46rpx;
        
        .row-1{
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 40rpx;
         color: #A77A3D;
         line-height: 56rpx;
         letter-spacing: 2px;
         text-align: center;
         font-style: normal; 
        }
        .row-2{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #94754C;
          line-height: 28rpx;
          letter-spacing: 1px;
          text-align: center;
          font-style: normal;
        }
      }
    }

    // >.tit {
    //   width: 466rpx;
    //   height: 78rpx;
    //   margin: auto;

    //   .img {
    //     width: 100%;
    //     height: 100%;
    //   }
    // }

    // .info-wraper {
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    //   width: 680rpx;
    //   margin: auto;

    //   font-family: PingFangSC, PingFang SC;
    //   font-weight: 400;
    //   font-size: 32rpx;
    //   color: #FFFFFF;
    //   line-height: 45rpx;
    //   letter-spacing: 1px;

    //   font-style: normal;
    // }


    .intro-tit-box {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      font-size: 30rpx;
      color: #326876;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      position: relative;
      margin-left: 18rpx;

      margin-bottom: 10rpx;


      &::before {
        width: 8rpx;
        top: 10rpx;
        height: 22rpx;
        background: #326876;
        border-radius: 4rpx;

        content: '';
        position: absolute;
        left: -18rpx;
      }
    }

    .scl-list {
      display: flex;
      flex-direction: column;
      row-gap: 20rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx dashed #979797;
      margin-top: 18rpx;

      .scl-box {
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #326876;
        font-style: normal;

        .name {
          width: 434rpx;
        }

        .num {
          width: 28rpx;
        }

        .price {
          flex: 1;
          text-align: right;
        }
      }
    }

    .scl-more-info {
      display: flex;
      flex-direction: column;
      row-gap: 14rpx;
      padding-top: 24rpx;


      .info-item {
        display: flex;
        align-items: center;

        .label {
          width: 400rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #326876;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .price {
          flex: 1;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #326876;
          line-height: 40rpx;
          text-align: right;
          font-style: normal;
        }

        .del-price {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #F90101;
          line-height: 40rpx;
          text-align: right;
          font-style: normal;
          flex: 1;
        }

        .bold-label {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #326876;
          line-height: 40rpx;
          font-style: normal;
        }

        .bold-price {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 40rpx;
          color: #326876;
          line-height: 56rpx;
          text-align: right;
          font-style: normal;
        }

      }

    }


    .scl-group-list-box {
      width: 680rpx;
      // height: 745rpx;
      background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
      box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
      border-radius: 24rpx;
      position: relative;
      margin: auto;
      padding-bottom: 84rpx;
    }

    .report-res-info-box {
      // width: 682rpx;
      width: 718rpx;
      // height: 368rpx;
      height: 386rpx;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      margin: auto;
      margin-bottom: 18rpx;

      .row-1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: rgba(12, 71, 59, .39);
        // line-height: 45rpx;
        text-align: center;
        font-style: normal;

        padding-top: 128rpx;
      }

      .row-2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 48rpx;
        color: #0C473B;
        line-height: 78rpx;
        text-align: center;
        font-style: normal;

        width: 610rpx;
        height: 78rpx;

        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: auto;

        margin-top: 12rpx;
        margin-bottom: 12rpx;
      }

      .row-3 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #064F44;
        line-height: 62rpx;
        text-align: center;
        font-style: normal;

        width: 590rpx;
        height: 62rpx;
        background: rgba(255, 255, 255, .57);
        box-shadow: inset 0rpx 1rpx 10rpx 0rpx rgba(146, 231, 216, .57);
        border-radius: 30rpx;

        margin: auto;

      }

    }


    .tit-img-box {
      left: 50%;
      top: -10rpx;
      transform: translateX(-50%);

      width: 416rpx;
      height: 62rpx;
      position: absolute;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .main-wrapper {
      width: 590rpx;
      margin: auto;
      // margin-bottom: calc(100rpx + constant(safe-area-inset-bottom));
      // margin-bottom: calc(100rpx + env(safe-area-inset-bottom));      
      // padding-top: 64rpx;
      padding-top: 90rpx;

      .intro-tit-box {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 30rpx;
        color: #326876;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        position: relative;
        margin-left: 18rpx;

        margin-bottom: 10rpx;

        &::before {
          width: 8rpx;
          top: 10rpx;
          height: 22rpx;
          background: #326876;
          border-radius: 4rpx;

          content: '';
          position: absolute;
          left: -18rpx;
        }
      }

      .button-wrapper {
        width: 360rpx;
        height: 90rpx;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -36rpx;
        // bottom: calc(50rpx + constant(safe-area-inset-bottom));
        // bottom: calc(50rpx + env(safe-area-inset-bottom)); 

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }


  }
  
  .btn-base {
    width: 270rpx;
    height: 70rpx;
    border-radius: 45rpx;
  
    font-family: PingFang-SC, PingFang-SC;
    // font-weight: bold;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 70rpx;
    text-align: center;
    font-style: normal;
  }
  .btn-normal {
      background: #5ED5FF;
    }
</style>